<template>
  <div
    :style="
      'width:' +
      screenWidth +
      'px;height:' +
      screenHeight +
      'px;overflow-y: auto;'
    "
  >
    <Header :Current="-1" @CurrentSelection="CurrentSelection"></Header>
    <div class="box">
      <div class="tabs_box">
        <div class="search_border">
          <input type="text" v-model="Params.title" class="search_input" />
          <div class="search_bottom" @click="searchFun">搜索</div>
        </div>
      </div>
      <div class="table">
        <div class="table_line_box">
          <div
            class="table_line"
            v-for="(item, index) in Listdata"
            :key="index"
          >
            <div class="table_line_text" @click="gopage(item)">
              {{ item.title }}
            </div>
            <div class="table_line_time">
              <Icon size="26" type="md-time" style="margin-right: 10px" />
              {{ item.modifiedTime || item.createdTime }}
            </div>
          </div>
        </div>
      </div>
      <div class="page_box">
        <Page
          :current="Params.pageNum"
          show-total
          class="page_style"
          :total="total"
          :page-size="Params.pageSize"
          @on-change="PageChange"
          @on-page-size-change="pageSizeChange"
        />
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import axios from "axios";
let moment = require("moment");
import Header from "@/componets/Header.vue";
import Footer from "@/componets/Footer.vue";
export default {
  name: "tabsTablelist",
  //   props: {
  //     data: {
  //       type: Object,
  //       default: function() {
  //         return {};
  //       },
  //     },
  //   },
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      screenWidth: 0,
      screenHeight: 0,
      Params: {
        title: "",
        pageNum: 1,
        pageSize: 15,
      },
      Listdata: [],
      total: 0,
    };
  },
  mounted() {
    this.updateScreenSize();
    window.addEventListener("resize", this.updateScreenSize);
    this.getContetn();
  },
  created() {
    this.search();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.updateScreenSize);
  },
  methods: {
    searchFun() {
      this.Params.pageNum = 1;
      this.search();
    },
    gopage(e) {
      window.open(
        "https://www.diantangkeji.com/#/detailspage?id=" + e.id,
        "_blank"
      );
    },
    PageChange(v) {
      console.log(v);
      this.Params.pageNum = v;
      this.search();
    },
    pageSizeChange(v) {
      this.Params.pageSize = v;
      this.search();
    },
    updateScreenSize() {
      this.screenWidth = window.innerWidth;
      this.screenHeight = window.innerHeight;
    },
    CurrentSelection(index, value) {
      this.CurrentNum = index;
      if (value == undefined) {
        value = index;
      }
      switch (value) {
        case 0:
          this.$router.push({
            name: "home",
          });
          break;
        case 1:
          this.$router.push({
            name: "OverseasOutstandingYouth",
          });
          break;
        case 2:
          this.$router.push({
            name: "TalentProject",
          });
          break;
        case 3:
          this.$router.push({
            name: "NationalNatural",
          });
          break;
        case 4:
          this.$router.push({
            name: "ScientificResearchDrawings",
          });
          break;
        case 5:
          this.$router.push({
            name: "ppt",
          });
          break;
        case 6:
          this.$router.push({
            name: "ResearchInformation",
          });
          break;
        case 8:
          this.$router.push({
            name: "searchInput",
          });
          break;
        case 20:
          this.$router.push({
            name: "ThesisGuidance",
          });
          break;
        default:
          break;
      }
    },
    search() {
      axios.post(`/textcontent/search`, this.Params).then((res) => {
        let { code, message, result } = res;
        console.log("result", result);
        if (code == "ok") {
          this.Listdata = result.data.map((item) => {
            item.createdTime = moment(item.createdTime).format("YYYY-MM-DD");
            item.modifiedTime = item.modifiedTime
              ? moment(item.modifiedTime).format("YYYY-MM-DD")
              : "";
            return item;
          });
          this.total = result.total;
        } else {
        }
      });
    },
  },
};
</script>

<style scoped>
.box {
  box-sizing: border-box;
  margin: 0 auto;
  width: 1920px;
}
.tabs_box {
  width: 1920px;
  background: #f7f8fa;
  height: 307px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search_border {
  width: 1302px;
  height: 64px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search_input {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 0;
  font-size: 26px;
  padding: 10px;
}
.search_input:focus {
  outline: none;
}
.search_bottom {
  cursor: pointer;
  width: 132px;
  height: 64px;
  background: #0365fe;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
}
.table {
  margin: 78px auto 60px;
  width: 1304px;
  min-height: 500px;
  max-height: 3150px;
}
/* .table_line_box {
  width: 1280px;
  height: 132px;
} */
.table_line {
  margin-bottom: 20px;
  height: 169px;
  border-bottom: 2px solid #dcdcdc;
}
.table_line_text {
  cursor: pointer;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 600;
  font-size: 26px;
  color: #1e1e1e;
  text-align: left;
  margin-bottom: 16px;
}
.table_line_text:hover {
  cursor: pointer;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 600;
  font-size: 26px;
  color: #0365fe;
  text-align: left;
  margin-bottom: 16px;
}
.table_line_time {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-size: 24px;
  color: #666666;
  margin-bottom: 16px;
}
.table_line_Details {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 400;
  font-size: 24px;
  color: #8d8d8d;
  margin-bottom: 22px;
}
.page_box {
  height: 78px;
}
.page_style {
  text-align: center;
  transform: scale(1.8);
}
</style>
